@import '../../../index.scss';

page {
  background-color: #f8f8f8;
}

.container {
  padding-bottom: 30rpx;

  .list {
    padding: 20rpx;
    box-sizing: border-box;

    .item {
      border-radius: 20rpx;
      padding: 20rpx;
      background-color: #fff;
      box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.04);
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      display: flex;
      margin-bottom: 20rpx;

      .cover {
        width: 240rpx;
        height: 180rpx;
        border-radius: 14rpx;
        overflow: hidden;
        margin-right: 20rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      >.right {
        flex: 1;
        height: 180rpx;
        display: flex;
        flex-direction: column;
        // justify-content: space-between;

        .info {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .left {
            display: flex;
            align-items: center;

            .avater {
              width: 50rpx;
              height: 50rpx;
              border-radius: 100%;
              overflow: hidden;
              margin-right: 20rpx;

              image {
                width: 100%;
                height: 100%;
              }
            }

            .user {
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              align-items: center;

              .name {
                display: flex;
                align-items: center;
                font-size: 24rpx;
                // font-weight: bold;
                align-items: center;

                .lv {
                  height: 24rpx;
                  margin-left: 10rpx;
                }
              }

              .time {
                font-size: 20rpx;
                color: #999;
              }
            }
          }

          .right {
            .more {
              height: 36rpx;
              opacity: .2;
            }
          }
        }

        .desc {
          font-size: 24rpx;
          color: #333;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          text-align: justify;
          /* 限制最多显示两行 */
          -webkit-box-orient: vertical;
          word-break: break-word;
          /* 防止长单词撑开布局 */
          margin-top: 10rpx;

        }

        .btnon {
          font-size: 22rpx;
          color: #787878;
          // text-align: right;
          margin-top: auto;
        }
      }
    }

    .noData {
      text-align: center;
      position: fixed;
      top: 35%;
      width: 100%;

      image {
        width: 20%;
      }

      .tip {

        color: #888;
        font-size: 26rpx;
        margin-top: 20rpx;
      }
    }
  }
}